<template>
  <div class="footer-card">
    <div v-for="item in list"  v-bind:key="item.id" class="item">
      <div class="box">
        <div  class="top">
          <div class="icon">
            {{ item.icon }}
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const list = ref([
      {
        title: '电话',
        id: 1,
        icon: 'call',
        desc: '010 - 83595020'
      },
      {
        title: '邮件',
        id: 2,
        icon: 'mail',
        desc: ' dd@petrochina.com.cn'
      },
      {
        title: '传真',
        id: 3,
        icon: 'print',
        desc: '010 - 83597480'
      },
      {
        title: '地址',
        id: 4,
        icon: 'location_on',
        desc: '北京市海淀区学院路20号'
      },
    ])
    return {
      list
    }
  }
}
</script>

<style scoped lang="scss">
.footer-card{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  gap: 2px;
  height: dpi(40rem);
  .item{
    padding: dpi(4rem);
    background: #0571b0;
    .title{
      font-family: Helvetica;
      font-size: dpi(2rem);
      color: #7fcfe2;
    }
    .desc{
      width: 100%;
      text-align: right;
      font-family: Helvetica;
      font-size: dpi(2rem);
      color: #fff;
    }
    .box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-direction: column;
      height: 100%;
    }
    .top{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .icon{
      font-family: "Material Symbols Outlined";
      font-weight: normal;
      font-size: dpi(5rem);
      color: #fff;
    }
  }
}
</style>